// 该文件为框架相关样式，请勿在这里设置 element plus 覆盖样式，如需设置自定义 element plus 覆盖样式，请到 override.scss 里设置
.fa-menu {
  &:not(.el-collapse-transition-leave-active, .el-collapse-transition-enter-active) {
    transition: background-color 0.3s;
  }

  .el-menu--inline {
    background-color: var(--ik-sub-sidebar-menu-bg) !important;

    .el-menu-item,
    .el-sub-menu>.el-sub-menu__title {
      color: var(--ik-sub-sidebar-menu-color) !important;
      background-color: var(--ik-sub-sidebar-menu-bg) !important;
      transition: background-color 0.3s, var(--el-transition-color);

      &:hover {
        color: var(--ik-sub-sidebar-menu-hover-color) !important;
        background-color: var(--ik-sub-sidebar-menu-hover-bg) !important;

        .el-sub-menu__icon-arrow {
          color: var(--ik-sub-sidebar-menu-hover-color);
        }
      }
    }
  }

  &.el-menu--collapse {
    .sidebar-item {
      i,
      svg {
        // height: auto;
        // width: 21px;
      }
    }

    .el-sub-menu.is-active>.el-sub-menu__title {
      // padding-left: 12px;
    }
  }

  &.el-menu--vertical:not(.el-menu--collapse, .el-menu--popup-container) .el-menu-item {
    margin-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding));
    padding-left: 16px;
  }
}

.fa-menu,
.fa-popup-menu {
  --el-menu-base-level-padding: 10px;

  .el-menu-item,
  .el-sub-menu__title {
    color: var(--ik-sub-sidebar-menu-color) !important;
    background: transparent !important;
    transition: background-color 0.3s, var(--el-transition-color), color;
    min-width: auto;

    &:hover {
      color: var(--el-color-primary) !important;
      background-color: var(--ik-sub-sidebar-menu-hover-bg) !important;
      --ik-main-icon-deep-color: var(--el-color-primary);
      --ik-main-icon-color: var(--ik-theme-color-re);

      i{
        color: var(--el-color-primary);
      }

      .el-sub-menu__icon-arrow {
        color: var(--ik-sub-sidebar-menu-hover-color);
      }
    }

    // i,
    // .icon,
    .el-sub-menu__icon-arrow {
      transition: color 0.3s, background-color 0.3s, transform 0.3s !important;
      color: var(--ik-sub-sidebar-menu-icon-color);
    }
  }

  .el-menu-item.is-active,
  &.el-menu--collapse .el-sub-menu.is-active>.el-sub-menu__title,
  &.el-popper .el-sub-menu.is-active>.el-sub-menu__title,
  .el-sub-menu .el-menu--inline .el-menu-item.is-active {
    color: var(--ik-sub-sidebar-menu-active-color) !important;
    background-color: var(--ik-sub-sidebar-menu-active-bg) !important;
    transition: background-color 0.3s, var(--el-transition-color);

    i,
    .icon,
    .el-sub-menu__icon-arrow {
      color: var(--ik-sub-sidebar-menu-active-color);
    }

    i {
      background-color: var(--ik-sub-sidebar-menu-active-bg) !important;
      // height: 36px;
      // width: 36px;
      border-radius: 6px;
      --ik-main-icon-deep-color: var(--el-color-primary);
      --ik-main-icon-color: var(--ik-theme-color-re);

      &.active {
        display: flex !important;
      }
    }
  }

  .el-sub-menu.is-active>.el-sub-menu__title {
    color: var(--ik-page-title-color) !important;
    transition: color 0.3s, background-color 0.3s;

    &:hover {
      color: var(--ik-sub-sidebar-menu-hover-color) !important;
      background-color: var(--ik-sub-sidebar-menu-hover-bg) !important;

      .el-sub-menu__icon-arrow {
        color: var(--ik-sub-sidebar-menu-hover-color);
      }
    }

    .el-sub-menu__icon-arrow {
      color: var(--ik-text-color);
    }
  }
}

.fa-popup-menu {
  border: none !important;

  &.none-body {
    display: none;
  }

  .el-sub-menu.is-firstLevel .el-sub-menu__title {
    margin-left: 0 !important;
    padding-left: 10px !important;
  }

  >.el-menu--vertical,
  >.el-menu--horizontal {
    max-width: 220px;
    border-bottom: none;

    .el-menu--popup {
      background-color: var(--ik-sub-sidebar-bg) !important;
      border-radius: 8px;
      width: 220px;

      .sidebar-item {
        padding: 0 10px;

        .el-menu-item.is-active {
          border-radius: 6px;
        }

        .el-sub-menu__icon-arrow {
          right: 0;
        }
      }
    }
  }
}

.el-loading-mask:not(.is-fullscreen) {
  z-index: 900 !important;
}

/**
 * @description: 根据UI设计图修改ElementUI默认样式 el-switch
 * @return {*}
 */
.el-switch {
  .el-switch__core {
    height: var(--ik-switch-height);
    border-radius: var(--ik-switch-height);

    .el-switch__action {
      width: calc(var(--ik-switch-height) - 6px);
      height: calc(var(--ik-switch-height) - 6px);
    }

    .el-switch__inner .is-icon,
    .el-switch__inner .is-text {
      padding: 0 5px;
    }
  }

  &.is-checked {
    .el-switch__core .el-switch__action {
      left: calc(100% - var(--ik-switch-height) + 5px);
    }
  }
}

/**
 * @description: el-table
 * @return {*}
 */
.el-table {
  .cell {
    line-height: 20px;

    .el-checkbox {
      .el-checkbox__inner {
        background-color: var(--ik-table-checkbox-bg);

        &::after {
          border-color: var(--ik-table-checkbox-bg);
        }
      }

      &.is-disabled {
        .el-checkbox__inner {
          background-color: var(--el-checkbox-disabled-input-fill);

          &::after {
            border-color: var(--el-checkbox-disabled-input-fill);
          }
        }
      }
    }
  }
}

.el-select-v2 .el-select-v2__wrapper {
  background-color: var(--ik-input-bg);
  border: none;

  &:hover {
    background-color: var(--ik-input-hover-bg);
  }

  &.is-focused {
    background-color: var(--ik-input-focus-bg);
  }
}

.el-collapse {
  --el-collapse-header-font-size: 14px;
}

.ik-table-popper.el-popper {
  min-width: 0;
  max-width: 400px;
}

.el-message{
  z-index: 9999 !important;
}

.el-popover.el-popper{
  min-width: 50px;
}

// .el-form-item--default {
//   margin-bottom: 10px;
// }
